<template>
  <div style="height: 100%">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-container>
        <el-main>
          <div style="padding: 0 0 0 20px">
            <el-input
              style="width: 250px"
              suffix-icon="el-icon-position"
              placeholder="请输入交警编号搜索"
              v-model="policeId"
            ></el-input
            >&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input
              style="width: 250px"
              suffix-icon="el-icon-search"
              placeholder="请输入交警姓名搜索"
              v-model="userName"
            ></el-input>
            <el-button style="margin-left: 5px" type="primary" @click="load"
              >搜索</el-button
            >
            <el-button style="margin-left: 5px" type="warning" @click="reset"
              >重置</el-button
            >
            <span>
              <Header />
            </span>
          </div>
          <div style="margin: 10px">
            <el-button type="danger" @click="delBatch"
              >批量删除<i class="el-icon-remove"></i
            ></el-button>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- <el-table-column prop="id" label="ID" v-if="false" align="center" /> -->
            <el-table-column
              fixed
              prop="id"
              label="ID"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="policeId"
              label="交警编号"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed
              prop="userName"
              label="交警姓名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="revisionTime"
              label="操作时间"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column prop="reviser" label="操作人" align="center" />
            <el-table-column
              prop="operationType"
              label="操作类型"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="userPassword"
              label="密码"
              width="380"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="lockStatus" label="状态" align="center">
              <template v-slot:default="scope">
                <span v-if="scope.row.lockStatus === 1">在职</span>
                <span v-else-if="scope.row.lockStatus === 0">离职</span>
                <!-- 这里可以省略 v-else，因为它默认不显示任何内容 -->
              </template>
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
              width="180"
            />
            <el-table-column
              prop="createBy"
              label="创建人"
              align="center"
              width="180"
            />

            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-popconfirm
                  style="margin-left: 5px"
                  confirm-button-text="确定"
                  cancel-button-text="再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="handleDelete(scope.row.eid)"
                >
                  <el-button
                    type="danger"
                    size="middle"
                    slot="reference"
                    icon="el-icon-delete"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
            <!-- <el-table-column fixed="right" label="完善交警信息" width="340">
              <template slot-scope="scope">
                <el-button
                  type="info"
                  size="middle"
                  icon="el-icon-view"
                  @click="view(scope.row)"
                  >更多</el-button
                >
                <el-popconfirm
                  style="margin-left: 5px"
                  confirm-button-text="确定"
                  cancel-button-text="再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="handleDelete(scope.row.id)"
                >
                  <el-button
                    type="danger"
                    size="middle"
                    slot="reference"
                    icon="el-icon-delete"
                    >删除</el-button
                  >
                </el-popconfirm>
                <el-button
                  type="success"
                  size="middle"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >更新</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
          <div style="padding: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

export default {
  name: "HomeView",
  components: {
    Aside,
    Header,
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      userName: "",
      policeId: "",
      hiddenValue: "1",
      isActive: "",
      dialogFormVisible: false,
      form: {},
    };
  },
  created() {
    //请求分页查询数据
    this.load();
  },
  methods: {
    edit(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      /*传递过来当前是第几页*/
      console.log(`每页 ${val} 条`);
      this.pageSize = val; //获取当前每页显示条数
      this.load();
    },
    handleCurrentChange(val) {
      /*传递过来当前是第几页*/
      console.log(`当前页: ${val}`);
      this.pageNum = val; //获取当前第几页
      this.load();
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {}; //如果之前有填过值，可以置空
    },
    handleEdit(row) {
      console.log(row);
      this.form = row; //把当前行的数据赋值给form
      this.dialogFormVisible = true;
      this.hiddenValue = 1;
    },
    handleView(row) {
      console.log(row);
      this.form = row; //把当前行的数据赋值给form
      this.dialogFormVisible = true;
    },

    handleDelete(id) {
      if (id !== null) {
        this.request
          .delete("http://localhost:8084/userext/" + id + "")
          .then((resp) => {
            if (Number(resp.code) === 200) this.$message.success(resp.msg);
            else this.$message.error(resp.msg);
            this.load();
          });
      } else this.$message.success("成功删除交警用户信息.");
    },

    saveUser() {
      if (this.hiddenValue === 1) {
        this.request
          .put("http://localhost:8084/userext/save", this.form)
          .then((resp) => {
            console.log(resp);
            // console.log(resp.data)
            if (resp) {
              this.$message.success("成功更新交警信息!");
              this.load();
            } else {
              this.$message.error("更新交警信息失败!");
            }
            this.dialogFormVisible = false;
            this.load();
            // }
          });
      } else {
        this.request
          .post("http://localhost:8084/userext/", this.form)
          .then((resp) => {
            console.log(resp);
            // console.log(resp.data)
            if (resp.code === 0) this.$message.success(resp.data);
            else this.$message.error(resp.data);
            this.dialogFormVisible = false;
            this.load();
            // }
          });
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    delBatch() {
      let ids = this.multipleSelection.map((v) => v.id); //map这个方法可以实现将multipleSelection中的对象扁平化处理。
      console.log(ids);
      this.request
        .post("http://localhost:8084/userext/del/batch/", ids)
        .then((res) => {
          if (res) {
            this.$message.success("成功批量删除交警账号!");
            this.load();
          } else {
            this.$message.error("批量删除失败!");
          }
        });
    },
    reset() {
      this.userName = "";
      this.policeId = "";
      this.total = "0";
      this.pageNum = "1";
      this.pageSize = "5";
      this.load();
    },

    //将请求数据封装为一个方法
    load() {
      // console.log(this.$axios);
      // 定义后端API的URL
      this.request
        .get(
          "http://localhost:8084/userlog/page?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize +
            "&userName=" +
            this.userName +
            "&policeId=" +
            this.policeId +
            ""
        )
        .then((userpage) => {
          console.log(userpage);
          this.tableData = userpage.pagedata;
          this.total = userpage.total;
        });

      // //请求分页查询数据
      //   fetch("http://localhost:8084/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"").then(res=>res.json()).then(res=>{
      //   console.log(res)
      //   this.tableData=res.pagedata
      //   this.total=res.total
      //   })
    },
  },
};
</script>
<style>
.el-main {
  text-align: left;
}
</style>
